<template>
	<Layout :pagebg="1" class-name="away layout-bg showH">
    <fa-navbar title="开溜吧"></fa-navbar>
    <view class="typeTab paddLR flex-lect" :style="{top:topH+'px'}">
      <view v-for="item in typeTabs" :key="item.id" class="item" :class="{on: typeId == item.id}" @click="typeId = item.id">{{item.name}}</view>
      <view class="flex-1"></view>
      <navigator v-show="typeId == 2" url="/home/mine/registration" class="color-888">报名记录</navigator>
    </view>
    <!-- 瀑布流 -->
    <view class="box flow-box" :class="typeId == 1 ? 'show' : ''">
      <custom-waterfalls-flow :value="traveData.list" image-key="image_text" @wapperClick="goDetail"></custom-waterfalls-flow>
    </view>
    <view v-show="typeId === 2" style="margin-top: -20rpx;">
      <zb-tab-group :list="tabList" v-model="tabId" @change="chooseTabId" />
      <empty :show="emptyShow" />
      <view class="shaishi-list box">
        <match-item v-for="(item, index) in matchData.list" :key="index" :item="item" @toDetail="linkTo" />
      </view>
    </view>
  </Layout>
</template>
<!-- status 1 - 待报名, 2-报名中, 3-待开赛, 4-开赛中, 5-已结束, 0-下架 -->
<script>
	export default {
		data() {
			return {
				keyWords:'',	
        isDelShow:false,
        tabList:[
          {name:'全部', id:0},
          {name:'报名中', id:2},
          {name:'待开赛', id:3},
          {name:'开赛中', id:4},
          {name:'已结束', id:5},
        ],
        tabId:0,
        emptyShow:false, // 空
        
        typeTabs:[
          {name:'旅游攻略', id:1},
          {name:'活动赛事', id:2},
        ],
        typeId:1,
        traveData:{
          page:1,
          list:[],
          isLast:false,
        },
        matchData:{
          page:1,
          list:[],
          isLast:false,
        },
        loading:0,
        status:0
			}
		},
    onLoad(e){
      uni.showLoading()
      this.getList1()
      this.getList2();
      this.typeId = Number(e.type || 1)
    },
    watch:{
      loading(n,o){
        if(this.loading > 1){
          uni.hideLoading()
        }else{
          uni.showLoading()
        }
      }
    },
    computed: {
      topH() {
        const systemInfo = uni.getSystemInfoSync();
        // 通常顶部导航栏高度：iOS 一般为 44 或 48，Android 一般为 48 或 56
        // 这里根据你的设计调整
        let navBarHeight = systemInfo.platform === 'ios' ? 44 : 48;
        
        // 判断是否固定导航栏
        return systemInfo.statusBarHeight + navBarHeight;
      }
    },
		methods: {
      getList1(){
        this.$api.traveMoreListsApi({page: this.traveData.page}).then(res=>{
          this.loading++;
          if(!this.traveData.isLast) {
            this.traveData.page++;
            this.traveData.list = [...this.traveData.list, ...res.data.data];
            this.traveData.isLast = false;
          }else{
            this.traveData.isLast = true;
          }
          console.log('this.traveData----------', this.traveData)
        }).catch(()=>{
          getApp().hideLoad()
        })
      },
      // 赛事
      getList2(){
        this.$api.activityMoreListsApi({page: this.matchData.page, status: this.tabId == 0 ? '' : this.tabId}).then(res=>{
          this.loading++;
          if(!this.matchData.isLast) {
            this.matchData.page++;
            this.matchData.list = [...this.matchData.list, ...res.data.data];
            this.matchData.isLast = false;
          }else{
            this.matchData.isLast = true;
          }
          this.emptyShow = this.matchData.list.length === 0
          console.log('this.matchData----------', this.matchData)
        }).catch(()=>{
          getApp().hideLoad()
        })
      },
      chooseTabId(id){
        if(this.tabId === this.status) return;
        this.status = this.tabId;
        this.matchData.page = 1;
        this.matchData.isLast = false;
        this.matchData.list = [];
        this.getList2()
      },
      linkTo(item){
        console.log('进入详情页', item)
        uni.navigateTo({
          url:'/home/match/detail?id='+item.id
        })
      },
      goDetail(item){
        console.log('111111111')
        uni.navigateTo({
          url:'/home/strategy_detail?id='+item.id
        })
      },
		},
    onPageScroll(e) {
      getApp().setNavFixed(this,e)
    },
    onReachBottom() {
    	if(!this.traveData.isLast){
        this.getList1()
      }
      if(!this.matchData.isLast){
        this.getList2()
      }
      if(!this.shop.isLast){
        this.getList3()
      }
    }
	}
</script>
<style>
page{background-color: #fff;}
</style>
<style lang="scss" scoped>
.typeTab{
  padding: 30rpx 0 16rpx; border-bottom: 1px solid #EEEEEE;background-color: rgba(255,255,255,0.8);
  .item{
    display: flex; align-items: center; justify-content: center; height: 60rpx; padding: 0 30rpx; border-radius: 60rpx; margin-right: 30rpx;
    &.on{background-color: #4FAD95; color: #fff;}
  }
  
}


</style>
